<!DOCTYPE html>
<html lang="zh-CN"
      xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
      xmlns:shiro="http://www.pollix.at/thymeleaf/shiro"
      layout:decorator="model/boardModel">
<head>
    <link th:href="@{/bootstrap/css/bootstrap-datetimepicker.min.css}" rel="stylesheet" media="screen"/>
</head>

<body>

<div th:fragment="pagenav" th:remove="tag">
    <div th:replace="model/nav :: pageheader ('控制台','控制台')"></div>
</div>

<div th:fragment="content" th:remove="tag">
    <section class="content" style="display:block;margin-top: 1px;min-height:10px;">
        <!-- Info boxes -->
        <div class="row">
            <shiro:hasAnyRoles name="admin,sys_agency,sys_ka,sys_bd,sys_nationwide,sys_supervisor">
                <div class="col-lg-3 col-xs-6">
                    <!-- small box -->
                    <div class="small-box bg-aqua">
                        <div class="icon">
                            <i class="ion ion-pie-graph"></i>
                        </div>
                        <div class="inner">
                            上月总回收量: <span class="badge" th:text="${goodsSumThisMonth}"></span><br/>
                            当月总回收量: <span class="badge" th:text="${goodsSumLastMonth}"></span><br/>
                            <span class="badge"></span><br/>
                            <span class="badge"></span><br/>
                        </div>
                    </div>
                </div>
                <!-- ./col -->
                <div class="col-lg-3 col-xs-6">
                    <!-- small box -->
                    <div class="small-box bg-green">
                        <div class="icon">
                            <i class="ion ion-stats-bars"></i>
                        </div>
                        <div class="inner">
                            <shiro:hasAnyRoles name="admin,sys_nationwide,sys_agency,sys_bd,sys_supervisor,sys_finance" >
                                总客户数: <span class="badge" th:text="${sumKa}"></span><br/>
                                当月产量客户: <span class="badge" th:text="${activeKa}"></span><br/>
                                总门店数: <span class="badge" th:text="${sumStore}"></span><br/>
                                产量门店数: <span class="badge" th:text="${activeStore}"></span><br/>
                            </shiro:hasAnyRoles>

                            <shiro:hasRole name="sys_ka">
                                总门店数: <span class="badge" th:text="${sumStore}"></span><br/>
                                产量门店数: <span class="badge" th:text="${activeStore}"></span><br/>
                            </shiro:hasRole>

                        </div>
                    </div>
                </div>
                <!-- ./col -->
                <div class="col-lg-3 col-xs-6">
                    <!-- small box -->
                    <div class="small-box bg-yellow">
                        <div class="icon">
                            <i class="fa fa-fw fa-line-chart"></i>
                        </div>
                        <div class="inner">
                            当天回收量(除爱心): <span class="badge" th:text="${goodsSumThisDay}">4</span><br/>
                            当天3元机: <span class="badge" th:text="${threeGoodsSumThisDay}">4</span><br/>
                            当天10元机: <span class="badge" th:text="${tenGoodsSumThisDay}">4</span><br/>
                            <span class="badge"></span><br/>
                        </div>

                    </div>
                </div>
                <!-- ./col -->
                <div class="col-lg-3 col-xs-6">
                    <!-- small box -->
                    <div class="small-box bg-red">
                        <div class="icon">
                            <i class="fa fa-fw fa-yen"></i>
                        </div>
                        <div class="inner">
                            待发货订单数: <span class="badge" th:text="${notExpressSum}">4</span><br/>
                            上月整体差错: <span class="badge" th:text="${rateOfErrorThisMonth}">4</span><br/>
                            当月整体差错: <span class="badge" th:text="${rateOfErrorLastMonth}">4</span><br/>
                            <span class="badge"></span><br/>

                        </div>
                    </div>
                </div>
                <!-- ./col -->
            </shiro:hasAnyRoles>

        </div>
    </section>
    <div class="row">
        <div class="col-md-12">
            <div class="box box-primary">
                <form id="queryForm" th:action="@{flow}" method="post">
                   <div class="box-body">
                        <div class="row">
                            <input type="hidden" th:name="userId" th:value="${session.authUser.userId}"/>
                            <shiro:hasRole name="sys_supervisor">
                                <input type="hidden" th:name="supervisorId" th:value="${session.supervisorId}"/>
                            </shiro:hasRole>
                            <shiro:hasRole name="sys_agency">
                                <input type="hidden" th:name="agencyId" th:value="${session.agencyId}"/>
                            </shiro:hasRole>
                            <shiro:hasRole name="sys_bd">
                                <input type="hidden" th:name="cityAgencyId" th:value="${session.cityAgencyId}"/>
                            </shiro:hasRole>
                            <shiro:hasRole name="sys_ka">
                                <input type="hidden" th:name="kaId" th:value="${session.kaId}"/>
                            </shiro:hasRole>
                        </div>
                    </div>
                </form>
            </div>
            <shiro:hasAnyRoles name="admin,sys_nationwide,sys_agency,sys_supervisor,sys_ finance">
            <div id="main" class="box-body" style="height:400px;">
        </div>
            </shiro:hasAnyRoles>
    </div>
    <script th:src="@{/charts/echarts.js}"></script>
    <script th:src="@{/charts/shine.js}"></script>
    <script type="text/javascript" th:src="@{/bootstrap/js/bootstrap-datetimepicker.js}" charset="UTF-8"></script>
    <script type="text/javascript" th:src="@{/bootstrap/js/locales/bootstrap-datetimepicker.zh-CN.js}" charset="UTF-8"></script>
    <shiro:hasAnyRoles name="admin,sys_nationwide,sys_agency,sys_supervisor,sys_ finance">
    <script >
      $(function () {
            var chart = echarts.init(document.getElementById('main'), 'shine');

            chart.showLoading({
                text: '正在努力加载中...'
            });

            // 同步执行
            $.ajaxSettings.async = false;

            var day = [];
            var statusName = [];
            var arrayObj = [];

            $.post( 'rp/home/flow',
                $("#queryForm").serialize(),
                function (datas) {
                    var data = $.parseJSON(datas);
                    day = data.day;
                    $.each(data.orders, function (index, obj) {
                        statusName.push(obj.statusName);
                        arrayObj.push({
                            name: obj.statusName,
                            type: 'line',
                            data: obj.goodsSum
                        });
                    });
                });



            // 指定图表的配置项和数据
            option = {
                tooltip: {
                    trigger: 'axis'
                },
                title: {
                    text: '月度订单量走势'
                },
                toolbox: {
                    show: true,
                    feature: {
                        dataZoom: {},
                        dataView: {readOnly: false},
                        magicType: {type: ['line', 'bar']},
                        restore: {},
                        saveAsImage: {}
                    }
                },
                legend: {
                    data:statusName
                },
                xAxis:  {
                    type: 'category',
                    boundaryGap: false,
                    data: day
                },
                yAxis: {
                    type: 'value',
                    axisLabel: {
                        formatter: '{value} '
                    }
                },
                series: arrayObj

            };





            // 使用刚指定的配置项和数据显示图表。
            chart.setOption(option);
            chart.hideLoading();

        })
    </script>
    </shiro:hasAnyRoles>
</div>
</div>
</body>
</html>
